@use "@/styles/var" as *;

.CommentListComponent {
    padding: 30px 0;

    .name {
        @apply text-[#444] dark:text-[#fff];
    }

    .active {
        @apply text-primary dark:!text-primary;
    }

    .comment_main {
        @apply text-[#666] dark:!text-[#cdcdcd];
    }

    .item{
        @apply border-b border-[#eee] border-dashed dark:!border-[#4e5969] hover:bg-[#f3f8fe] dark:hover:bg-[#2e3745];
    }

    /* 评论内容 */
    .list {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        margin-top: 20px;

        .item {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 105px;
            padding: 20px 10px;
            transition: all 0.3s;

            &:hover {
                border-radius: $round;

                .reply {
                    right: 2%;
                }
            }

            // 回复按钮布局
            .reply {
                position: absolute;
                right: -15%;
                padding: 5px 10px;
                font-size: 20px;
                cursor: pointer;
                color: #fff;
                border-radius: 30px;
                background-color: $color;
                transition: all $move;
            }

            // 评论者头像
            .avatar {
                width: 35px;
                height: 35px;
                margin-right: 10px;
                border-radius: 50%;
            }

            /* 评论者信息 */
            .comment_user_one {
                display: flex;
                align-items: center;

                /* 评论者信息 */
                .comment_user_one_info {
                    display: flex;
                    flex-direction: column;

                    /* 评论者昵称 */
                    .name {
                        font-size: 16px;
                        transition: color $move;
                    }

                    /* 评论时间 */
                    .time {
                        color: #8599ab;
                        font-size: 14px;
                    }
                }
            }

            /* 评论的内容 */
            .comment_main {
                margin: 10px 0 10px 0px;
                font-size: 15px;
                transition: all $move;
                word-break: break-word;
            }

            /* 二级评论 */
            .comment_user_two {
                margin: 20px 0 0 50px;

                .comment_user_two_info {
                    display: flex;
                    align-items: center;

                    .avatar_two {
                        width: 25px;
                        height: 25px;
                        margin-right: 10px;
                        border-radius: 50%;
                    }

                    .name {
                        margin-right: 15px;
                        font-size: 15px;
                        transition: color $move;
                    }

                    .time {
                        color: #8599ab;
                        font-size: 12px;
                    }
                }

                .comment_main {
                    margin: 10px 0 10px 0px;

                    a {
                        color: #007bff;
                    }
                }
            }

            /* 三级评论 */
            .comment_user_three {
                margin: 20px 0 0 50px;

                .comment_user_three_info {
                    display: flex;
                    align-items: center;

                    .avatar_three {
                        width: 25px;
                        height: 25px;
                        margin-right: 10px;
                        border-radius: 50%;
                    }

                    .name {
                        margin-right: 15px;
                        font-size: 15px;
                        transition: color $move;
                    }

                    .time {
                        color: #8599ab;
                        font-size: 12px;
                    }
                }

                .comment_main {
                    margin: 10px 0 10px 0px;

                    a {
                        color: #007bff;
                    }
                }
            }

            /* 最后一个取消下边框 */
            &:last-of-type {
                border: none;
            }
        }
    }

    // 空状态
    .void {
        text-align: center;
        margin: 50px 0 10px;

        img {
            width: 200px;
            height: 150px;
        }

        p {
            margin-top: 10px;
            color: #333;
        }
    }
}